<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">


			<!-- 内容 -->
			<div class="main" :style="{ paddingTop: 2 * navTop + custom.height + custom.top + 10 + 'px' }">
				<div class="main-box">
					<div class="flex-center serve-box pb-34 bor-b">
						<image class="serve-img" :src="baseUrl + serviceDetail.carouselImageUrls" mode="aspectFill">
						</image>
						<div class="serve-right ml-26">
							<div>{{ serviceDetail.serveName }}</div>
							<div class="flex align-baseline mt-28" v-if="!tutorDetail">
								<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'fix'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										serviceDetail.attributeDtos[0].presentPrice }}
									</div>
									<div class="fontS22 color-9 text-decoration-through ml-10"
										v-if="serviceDetail.priceType !== 'tutor'">¥{{
											serviceDetail.attributeDtos[0].price }}
									</div>
								</div>
								<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'periodic'">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										serviceDetail.attributeDtos[0].presentPrice }}
									</div>
									<div class="fontS22 color-9  ml-10"> 元/人/月
									</div>
								</div>
								<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'unfix'">
									<div class="color-red fontS32">??</div>
									<div class="fontS22 color-9  ml-10"> 咨询客服改价
									</div>
								</div>


							</div>
							<div v-else class="flex  mt-28">
								<div class="flex-center align-baseline">
									<div class="color-red fontS24">¥</div>
									<div class="color-red fontS32 font-bold">{{
										tutorDetail.price }}
									</div>

								</div>
							</div>

						</div>
						<div v-if="num" class="ml-auto">x{{ num }}</div>
					</div>
					<div class="flex serve-box pb-34 bor-b mt-30" v-if="tutorId">
						<image class="tutor-img" :src="baseUrl + tutorDetail.carouselImageUrls" mode="aspectFill">
						</image>
						<div class="tutor-right ml-22 mt-6">
							<div class="fontS28 lh-44">{{ tutorDetail.tutorName }}</div>
							<div class="tutor-tag mt-20">{{ tutorDetail.parentLabelName }}/{{ tutorDetail.labelName }}
							</div>
						</div>
					</div>
					<div class="flex align-center lh-60 mt-20 pb-20 bor-b">
						<div>订单备注</div>
						<input type="text" v-model="remark" placeholder="请输入订单备注" />
					</div>
					<div class="flex mt-20">
						<div class="ml-auto flex-center">
							<div class="fontS24 color-3">共{{ num || '1' }}件 小计：</div>
							<div v-if="serviceDetail.priceType === 'unfix'"> - </div>
							<div class="fontS32 font-bold" v-else-if="tutorDetail && tutorDetail.price"><span
									class="fontS24 color-3" style="font-weight: normal;">¥</span>{{ tutorDetail.price }}
							</div>
							<div class="fontS32 font-bold" v-else><span class="fontS24 color-3"
									style="font-weight: normal;">¥</span>{{ num *
										serviceDetail.attributeDtos[0].presentPrice }}</div>
						</div>
					</div>
				</div>
				<div>
					<div v-for="(item, index) in payList" :key="index" :class="radioAct === index ? 'active' : ''"
						class="pay-main mt-20 " @click="changeRadio(index)">
						<div class="pay-box flex align-center pt-30 pb-30 fontS30 pl-20">

							<image class="iconImg" :src="item.icon"></image>
							<div class="ml-18">{{ item.title }}</div>
							<div class="iconfont icon-danxuankuang ml-auto color-d fontS40 pr-20"
								:class="radioAct === index ? 'icon-xuanzhong color-green' : ''"></div>
						</div>

						<div v-if="radioAct === 1 && index === 1" class="public-box">

							<div class="fontS28 lh-55 "><span class="color-ae w-120">企业全称</span> 企业NO.1</div>
							<div class="flex align-center">
								<div class="fontS28 lh-55 "><span class="color-ae w-120">银行账号</span> 银行账号001--test
								</div>
								<div class="ml-auto color-green" @click="copyBtn('银行账号001--test')">复制</div>
							</div>
							<div class="fontS28 lh-55 "><span class="color-ae w-120">开户银行</span> 开户行001</div>


						</div>
					</div>
				</div>



			</div>

			<div class="bottom">

				<div class="bottomBtn fontS26" @click="toOrder">确认支付
				</div>

			</div>
		</div>

	</view>
</template>

<script>
const App = getApp().globalData;

import {
	findServePersonalDetailApp,
	findServeDetailApp,
	tutorDetailApi,

} from "@/api/serve";

import {
	creatOrder,
	payApp
} from "@/api/order";

export default {

	data() {
		return {
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,

			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			tutorDetail: null,
			loading: false,

			payList: [
				{
					icon: 'https://xingangtong.oss-cn-beijing.aliyuncs.com/common/微信.png',
					title: '微信支付',
				},
				{
					icon: 'https://xingangtong.oss-cn-beijing.aliyuncs.com/common/对公转账.png',
					title: '对公转账支付',
				}
			],
			radioAct: null,
			iconList: [],
			custom: null,
			navTop: null,
			serveId: null,
			tutorId: null,

			remark: '',
			num: null,
			orderId: ''


		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},
	mounted() {

		// 动态获取头部高度
		const query = uni.createSelectorQuery().in(this);
		query.select('.header').boundingClientRect(data => {
			if (data) {
				console.log(data)
				this.headerHeight = data.height;
			}
		}).exec();

	},

	async onLoad(option) {

		this.serveId = option.serveId
		await this.getServiceDetail(option.serveId)
		if (option.tutorId) {
			this.tutorId = option.tutorId
			await this.getTutorDetail(option.tutorId)
		}
		if (option.num) this.num = option.num
		this.loading = true

	},

	async onShow() {


	},

	methods: {
		copyBtn(data){
				uni.setClipboardData({
					data: data,
					success: () => {
						uni.showToast({
							title: '复制成功，请在浏览器打开保存',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.error('复制失败:', err);
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
		},
		changeRadio(index) {
			this.radioAct = index
		},
		wxScale() {
			uni.previewImage({
				urls: [
					"https://oss-prod.xtrip.vip/common/20241011102729.png?x-oss-process=image/quality,q_80/format,jpg"
				], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了

			})
		},

		// 个人端详情
		async getServiceDetail(id) {
			let apiUrl = this.userInfo.userType === '02' ? findServePersonalDetailApp : findServeDetailApp
			const {
				data
			} = await apiUrl(id);
			this.serviceDetail = data


		},
		async getTutorDetail(id) {
			const {
				data
			} = await tutorDetailApi(id, this.serveId);
			this.tutorDetail = data


		},
		// 跳转支付
		async toOrder() {

			await this.creatOrder()
			console.log(this.orderId)
			if (this.radioAct === null) {
				uni.showToast({ title: '请先选择支付方式', icon: 'none' })
				return false;
			}
			if (this.radioAct === 1) {

				if (this.serviceDetail.priceType === 'unfix') {
					uni.redirectTo({

						url: `/pages/order/success?orderId=${this.orderId}`
					})

				} else {
					uni.navigateTo({
						url: `/pages/order/uploadVoucher?serveId=${this.serviceDetail.serveId}&tutorId=${this.tutorId ? this.tutorId : ''}&num=${this.num}&orderId=${this.orderId}`
					})
				}
			} else {

				if (this.serviceDetail.priceType === 'unfix') {
					uni.redirectTo({
						url: `/pages/order/success?orderId=${this.orderId}`
					})
				} else {
					await this.pay()
				}
			}
		},
		async pay() {

			let paramPay = {
				openId: this.userInfo.openId,
				orderId: this.orderId,
				payMethod: '1',
				wxPayType: '1',

			}
			await payApp(paramPay).then(res => {
				let _this = this;
				console.log(res)
				let {

					nonceStr,
					packageVal,
					paySign,
					signType,
					timeStamp
				} = res.data.appletPayData

				// let payData = {}
				let payData = {
					success: function (res) {
						console.log(res)
						let isSuccess = true;
						//#ifdef MP-TOUTIAO
						if (res.code != 0) {
							isSuccess = false;
						}
						//#endif
						if (isSuccess) {
							console.log('支付成功++++++++++++++++++++++++')
							uni.redirectTo({
								url: `/pages/order/success?orderId=${_this.orderId}`
							})
							// _this.$refs.popup.open()
							// _this.getData()

						} else {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							})
							console.log('支付失败---------------------------------')
						}

						console.log('success:' + JSON.stringify(res));
					},
					fail: function (err) {

						// uni.showToast({
						// 	title:"支付失败",
						// 	icon:"none"
						// })
						uni.redirectTo({
							url: `/pages/order/fail?orderId=${_this.orderId}`
						})
						console.log('fail:' + JSON.stringify(err));
					}
				};


				//#ifdef MP-WEIXIN
				payData.timeStamp = timeStamp;
				payData.nonceStr = nonceStr;
				payData.package = packageVal;
				payData.signType = signType;
				payData.paySign = paySign
				//#endif
				// 调起微信支付
				uni.requestPayment(payData)
			})
		},
		async creatOrder() {
			let params = {
				userType: this.userInfo.userType,
				serveId: this.serviceDetail.serveId,
				payRemark: this.remark || '',
				attrId: this.serviceDetail.priceType !== 'unfix' && this.serviceDetail.priceType !== 'tutor' ? this.serviceDetail.attributeDtos[0].attrId : '',
				serveNum: this.num || 1,
				remark: this.remark,
				payChannel: this.radioAct === 0 ? 1 : 3,
				tutorId: this.tutorId,
				channel: 1,
				payPeriod: this.serviceDetail.priceType === 'periodic' && this.serviceDetail.payType === 'cycle' ? this.serviceDetail.servePeriodUnit : '',
			}
			const { data } = await creatOrder(params)
			this.orderId = data
		},
	},

	onReachBottom() {
	},
	onPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

page {
	background-color: #f7f7f7 !important;
}

.content {

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}

.avator {
	width: 100%;
	height: 544upx;
}

.iconImg {
	width: 50upx;
	height: 50upx;
}

.tutor-detail {
	margin: 0 20upx;
	background: #FFFFFF;
	border-radius: 16upx;
	padding: 50upx 30upx;
	margin-top: -180upx;
	position: relative;
	z-index: 6;
	min-height: calc(100vh - 650rpx);

	.text-detail {
		font-weight: 400;
		font-size: 28upx;
		color: #373737;
		line-height: 40px;
		text-align: justify;
	}
}
</style>